@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/cart/list.css')}}">
@section('content')
<div class="mainHrContent" id="cartList" v-cloak>
    <div class="payheader">
        <a href="{{route('home.index.index') }}">
            <img :src="headerLogo" alt="">
            购物车
        </a>
    </div>
    <div class="cartListHeader">
        <div class="cartListHeader_0">
            <span class="check" :class="{active:checkAll==listData.length}" @click="allCheck">
                <img src="{{URL::asset('./img/icon/gou.png')}}">
            </span>
        </div>
        <div class="cartListHeader_1">
            全部商品
        </div>
        <div class="cartListHeader_2">
            单价
        </div>
        <div class="cartListHeader_3">
            数量
        </div>
        <div class="cartListHeader_4">
            小计
        </div>
        <div class="cartListHeader_5">
            操作
        </div>
    </div>
    <div class="cartListTable" v-for="item in listData">
        <div class="cartListTable_header">
            <div class="cartListHeader_0">
                <span class="check" :class="{active:item.bool}" @click="itemCheck(item)">
                    <img src="{{URL::asset('./img/icon/gou.png')}}">
                </span>
            </div>
            <div class="cartListHeader_1">
                @{{item.store_name}}
            </div>
        </div>
        <div class="cartListTable_tbody" v-for="list in item.goods_list">
            <div class="cartListHeader_0" style="height:14px;">
                <span class="check" :class="{active:list.bool}" @click="listCheck(list)">
                    <img src="{{URL::asset('./img/icon/gou.png')}}">
                </span>
            </div>
            <div class="cartListHeader_1">
                <img :src="list.goods_img">
                @{{list.goods_name}}
            </div>
            <div class="cartListHeader_2">
                ￥@{{list.goods_price}}
            </div>
            <div class="cartListHeader_3">
                <span class="details_title_ss_div">
                    <span class="jian" @click="cartAdd(list,2)">
                        <img src="{{URL::asset('./img/icon/jian.png')}}">
                    </span>
                    <span class="contentNum">@{{list.num}}</span>
                    <span class="jia" @click="cartAdd(list,1)">
                        <img src="{{URL::asset('./img/icon/jia.png')}}">
                    </span>
                </span>
            </div>
            <div class="cartListHeader_4">
                ￥@{{list.num*list.goods_price}}
            </div>
            <div class="cartListHeader_5">
                <p @click="deleteCart(list.id)">删除</p>
            </div>
        </div>
    </div>
    <div class="cartListFooter">
        <div>
            <div class="cartListHeader_0">
                <span class="check" :class="{active:checkAll==listData.length}" @click="allCheck">
                    <img src="{{URL::asset('./img/icon/gou.png')}}">
                </span>
            </div>
            <div class="cartListCursor">全部商品</div>
            <div class="cartListCursor" @click="allDelete">删除选择商品</div>
        </div>
        <div>
            <span class="checkGoods">已选择 <em>@{{countNum}}</em> 件商品</span>
            <div class="contMoney">
                总价（不含运费）：<em>￥@{{count}}</em>
            </div>
            <button @click="gotoAccount" class="gotoAccount">去结算</button>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let balanceAdd = new Vue({
            el: '#cartList',
            data: () => {
                return {
                    headerLogo: '',
                    checkNum: 1,
                    listData: [],
                    checkAll: 0,
                    countNum: 0,
                    count: 0,
                }
            },
            created() {
                this.headerLogo = JSON.parse(sessionStorage.getItem("overall")).site_logo
                this.getList();
            },
            mounted() {

            },
            methods: {
                getList() {
                    let data = {}
                    apiAjax("{{ route('home.cart.cartListsApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.listData = res.data
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });

                        }
                    }, (erro) => {

                    });
                },
                // 删除单个
                deleteCart(id) {
                    let data = {
                        cart_id: id
                    }
                    apiAjax("{{ route('home.cart.cartDelete')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });

                        }
                    }, (erro) => {

                    });
                },
                // 数量增减
                cartAdd(item, type) {
                    let data = {
                        store_id: item.store_id,
                        store_name: item.store_name,
                        goods_id: item.goods_id,
                        goods_name: item.goods_name,
                        goods_img: item.goods_img,
                        goods_price: item.goods_price,
                        num: 1,
                        type: type,
                    }
                    apiAjax("{{ route('home.cart.cartAddApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });

                        }
                    }, (erro) => {

                    });
                },
                // 店铺点击
                itemCheck(item) {
                    if (item.bool) {
                        item.goods_list.forEach(element => {
                            element.bool = false;
                        });
                    } else {
                        item.goods_list.forEach(element => {
                            element.bool = true;
                        });
                    }
                    item.bool = !item.bool
                    this.checkClickAll()
                },
                // 商品点击
                listCheck(item) {
                    item.bool = !item.bool;
                    this.listData.forEach(elements => {
                        elements.bool = true;
                        elements.goods_list.forEach(element => {
                            if (!element.bool) {
                                elements.bool = false;
                            }
                        });
                    });
                    this.checkClickAll();
                },
                //计算点击数
                checkClickAll() {
                    this.checkAll = 0;
                    this.countNum=0;
                    this.listData.forEach(element => {
                        element.goods_list.forEach(elements => {
                            if (elements.bool) {
                                this.countNum++
                            }
                        });
                    });
                    this.countMoney();
                },
                // 全部点击
                allCheck() {
                    if (this.checkAll != this.listData.length) {
                        this.checkAll = 0;
                        this.listData.forEach(element => {
                            element.bool = true;
                            element.goods_list.forEach(elements => {
                                elements.bool = true;
                            });
                            this.checkAll++
                        });

                    } else {
                        this.checkAll = 0;
                        this.listData.forEach(element => {
                            element.bool = false;
                            element.goods_list.forEach(elements => {
                                elements.bool = false;
                            });
                            this.checkAll++
                        });
                    }
                    this.countMoney();
                },
                // 计算总额
                countMoney() {
                    this.count = 0;
                    this.listData.forEach(elements => {
                        elements.goods_list.forEach(element => {
                            if (element.bool) {
                                this.count += (element.num * element.goods_price)
                            }
                        });
                    });
                    this.count = parseFloat(this.count).toFixed(2)

                },
                gotoAccount() {
                    let cartData = [];
                    this.listData.forEach(elements => {
                        elements.goods_list.forEach(element => {
                            if (element.bool) {
                                cartData.push({
                                    id: element.id,
                                    num: element.num,
                                })
                            }
                        });
                    });
                    if (!cartData.length){
                        return this.$message({
                            message: '请选择商品!',
                            type: 'warning'
                        });
                    }
                    // ?goodsId='+goodsDetials.id+'&num='+goodsNum+'&ifcart=0'
                    window.location.href = "{{ route('home.order.sureOrder') }}?ifcart=" + 1;
                    sessionStorage.setItem("cartData", JSON.stringify(cartData))
                },
                // 删除全部
                allDelete() {
                    let cartId = [];
                    this.listData.forEach(elements => {
                        elements.goods_list.forEach(element => {
                            if (element.bool) {
                                cartId.push(element.id);
                            }
                        });
                    });
                    let data = {
                        cart_id: cartId.join()
                    }
                    apiAjax("{{ route('home.cart.cartDelete')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });

                        }
                    }, (erro) => {

                    });
                },

            }
        })
    })
</script>
@endsection